import { defineStore } from "pinia";

// 1.定义并导出容器
export const useMainStore = defineStore('main', {
  // 类似于组件的 data，用来储存全局状态
  // state必须是一个箭头函数
  state: () => {
    return {
      count: 100,
      foo: 'bar',
      arr: [1, 2, 3]
    }
  },
  // 类似组件的 computed，用来封装计算属性，有缓存功能
  getters: {
    count10(state) {
      console.log('我有缓存功能');
      return state.count + 10
    },
    // count10() {
    //   console.log('我有缓存功能');
    //   return this.count + 10
    // }
  },
  // 类似组件的 methods，用来封装业务逻辑，修改 state
  actions: {
    changeStae(num) {
      // this.count++
      // this.foo = 'hello'
      // this.arr.push(4)
      this.$patch(state => {
        state.count += num
        state.foo = 'hello'
        state.arr.push(4)
      })
    }
  }
})

// 2.使用容器中的state

// 3.修改state

// 4.容器中action的使用